<template>
  <div id="app" class="skEnvironmentTable">
    <a-card>
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" >
          <a-row :gutter="24">
            <a-col :span="7">
              <a-form-item label="设备">
                <a-select
                  default-value="0"
                  v-model="queryParam.deviceId"
                  class="class-select"
                  placeholder="请选择设备"
                >
                  <a-select-option v-for="item in deviceList" :key="item.id" :value="item.id">
                    {{ item.deviceName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="日期">
                <a-date-picker value-format="YYYY-MM-DD" v-model="queryParam.date"  />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item >
                <a-button @click="getEnvironmentData">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="type"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        class="j-table-force-nowrap"
      >
      </a-table>
      <a-row :gutter="12">
        <a-col :sm="8">
          <stacked-line :width="'100%'" :height="'400px'" :seriesName="[`温度`]" :unit="'°C'" :xData="time" :data="temperatureData"   ></stacked-line>
        </a-col>
        <a-col :sm="8">
          <stacked-line :width="'100%'" :height="'400px'" :seriesName="[`湿度`]" :unit="'%'" :xData="time" :data="humidityData"   ></stacked-line>
        </a-col>
        <a-col  :sm="8">
          <stacked-line :width="'100%'" :height="'400px'" :seriesName="['PM2.5','PM10']" :unit="'μg/m³'" :xData="time" :data="pm25_10Data"   ></stacked-line>
        </a-col>
      </a-row>
      <a-row :gutter="12">
        <a-col :sm="8">
          <stacked-line :width="'100%'" :height="'400px'" :seriesName="[`二氧化碳`]" :unit="'ppm'" :xData="time" :data="co2Data"   ></stacked-line>
        </a-col>
        <a-col :sm="8">
          <stacked-line :width="'100%'" :height="'400px'" :seriesName="[`甲醛`]" :unit="'mg/m³'" :xData="time" :data="ch2oData"   ></stacked-line>
        </a-col>
        <a-col :sm="8">
          <stacked-line :width="'100%'" :height="'400px'" :seriesName="[`有机化合物`]" :unit="'μg/m³'" :xData="time" :data="tvocData"  ></stacked-line>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { getAction } from "@/api/manage.js";
import StackedLine from "@/components/Echarts/StackedLine.vue";
export default {
  name: 'skEnvironmentTable',
  data() {
    return {
      queryParam:{
        deviceId:undefined,
        date:""
      },
      deviceList:[],    //设备
      loading:false,
      time:[],   //时间
      ch2oData:[],           //CH₂O
      co2Data:[],            //CO₂
      humidityData:[],       //湿度
      pm25_10Data:[],            //Pm2.5&PM10
      temperatureData:[],     //温度
      tvocData:[],            //TVOC
      dataSource:[],
      columns:[
        {
          title: (
            <div class="headerCell">
              <div class="afer">日期</div>
              <div class="before">环境</div>
            </div>
          ),
          dataIndex: 'type',
          key: 'type',
          // 固定分组这一栏的宽度
          width: 100,
          align: 'center'
        },
      ],
    }
  },
  components: {
    StackedLine
  },

  filters: {},

  computed: {
    
  },

  created() {
    this.getDeviceList();
    this.setColumns();
    
  },

  activated() {},

  mounted() {
    this.queryParam.date = this.$skCommon.getDate(0)
    
  },
  methods: {
    // 班级列表
    getDeviceList() {
      let url = "/management/skDevice/listAll"
      getAction(url,{deviceType:3}).then((res)=>{
        if(res.success){
          this.deviceList = res.result;
          this.queryParam.deviceId = this.deviceList[0].id;
          this.getEnvironmentData();
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    // 获取环境数据
    getEnvironmentData(){
      this.initDataSource()
      let url = "/environment/skEnvironment/list";
      let params = {
        queryDate:this.queryParam.date,
        deviceId:this.queryParam.deviceId
      }
      this.ch2oData = [];
      this.co2Data = [];
      this.humidityData = [];
      this.temperatureData = [];
      this.tvocData= [];
      this.pm25_10Data = []
      getAction(url,params).then((res)=>{
        if(res.success){
          let pm10Data = [];
          let pm25Data = []
          res.result.forEach((item,i) => {
            let time = item.createTime.substring(11,13) + ":00"
            this.setDataSource(item)
            // 折线图
            this.ch2oData.push([time,item.ch2o]);
            this.co2Data.push([time,item.co2]);
            this.humidityData.push([time,item.humidity]);
            this.temperatureData.push([time,item.temperature]);
            this.tvocData.push([time,item.tvoc]);
            pm10Data.push([time,item.pm10]);
            pm25Data.push([time,item.pm25]);
          });
          this.pm25_10Data.push(pm25Data,pm10Data)
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    // 初始化数据
    initDataSource(){
      this.dataSource = [
        {
          type:"温度(°C)",
        },
        {
          type:"湿度(%)",
        },
        {
          type:"PM2.5(μg/m³)",
        },
        {
          type:"PM10(μg/m³)",
        },
        {
          type:"二氧化碳(ppm)",
        },
        {
          type:"甲醛(mg/m³)",
        },
        {
          type:"有机化合物(μg/m³)",
        }
      
      ]
    },
    setDataSource(item){
      let time = item.createTime.substring(11,13)
      this.dataSource[0]["dataNum" + time] = item.temperature;
      this.dataSource[1]["dataNum" + time] = item.humidity;
      this.dataSource[2]["dataNum" + time] = item.pm25;
      this.dataSource[3]["dataNum" + time] = item.pm10;
      this.dataSource[4]["dataNum" + time] = item.co2;
      this.dataSource[5]["dataNum" + time] = item.ch2o;
      this.dataSource[6]["dataNum" + time] = item.tvoc;
    },
    setColumns(){
      for (let i = 0; i < 24; i++) {
        let time = i<=9?"0"+i :i
        this.time.push(time + ":00")
      }
      this.time.forEach(t => {
        let json = {}
        json = {
          title:t,
          dataIndex:"dataNum" + t.substring(0,2),
          align:"center",
          customRender:function (text) {
            return text!= null?text:'--'
          }
        }
        this.columns.push(json)
      });
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.headerCell {
  // 画三角形
  border-top: 43px rgb(250 250 250) solid;
  /*上边框宽度等于表格第一行行高*/
  width: 0px;
  /*让容器宽度为0*/
  height: 0px;
  /*让容器高度为0*/
  border-left: 100px rgb(250 250 250) solid;
  /*左边框宽度等于表格第一行第一格宽度*/
  position: relative;
  .afer {
    position: absolute;
    top: -48px;
    left: -54px;
    width: 60px;
    color: #666666;
  }
  .before {
    position: absolute;
    top: -14px;
    left: -103px;
    width: 60px;
    color: #666666;
  }
  // 伪元素画分割线
  &::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 122px;
    top: -80px;
    left: -52px;
    background-color: rgb(228, 225, 225);
    display: block;
    transform: rotate(-60deg);
  }
}
</style>
